<template>
  <div class="bigbox">
    <header>
      <div class="hed1" @click="chehui()">&lt;</div>
      <div @click="objfun($event)" class="hed2">
        <p @click="fun('Nan')" class="active">男生完结</p>
        <p @click="fun('Nv')">女生完结</p>
      </div>
    </header>
       <keep-alive>
          <component :is="com"></component>
      </keep-alive>
  </div>
</template>

<script>
import Nan from "@/views/dongtai/nansheng.vue";
import Nv from "@/views/dongtai/nvsheng.vue";

export default {
  methods: {
    fun(data) {
      this.com = data;
    //   this.classList.add('active')
    },
    objfun(obj){
        // console.log(obj.target.parentNode.childNodes);
        obj.target.parentNode.childNodes.forEach((item)=>{
            item.classList.remove('active')
        })
        obj.target.classList.add('active')
    },
    chehui(){
        this.$router.go(-1)
    }
  },
  data() {
    return {
      com: "Nan"
    };
  },
  components:{
      Nan,Nv
  }
};
</script>

<style scoped>
.bigbox {
  width: 100%;
  /* height: 5rem; */
  box-sizing: border-box;
  padding: 0 0.2rem;

}
header {
    width: 100%;
  height: 0.51rem;
  /* background: pink; */
  display: flex;
  top: 0;
  position: fixed;
  top: 0;
  background: white;
}
header .hed1 {
  width: 0.51rem;
  line-height: 0.51rem;
}
header .hed2 {
  display: flex;
  flex: 1;
}
header .hed2 p {
  width: 50%;
  height: 0.51rem;
  line-height: 0.51rem;
}
.active{
    font-weight: 700;
}
</style>